<nav id="navbar" class="navbar navbar-inverse navbar-fixed-left navbar-collapsed" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="/">ZUI &nbsp; <small class='text-muted version-current'></small></a>
  </div>
  <div class="collapse navbar-collapse" id="navbar-collapse">
    <ul class="nav navbar-nav collapsed" data-tab="start">
      <li class="nav-heading">Start</li>
      <li><a href="/docs/start.html#intro">Description</a></li>
      <li><a href="/docs/start.html#about">Agreement</a></li>
      <li><a href="/docs/start.html#files">File directory structure</a></li>
      <li><a href="/docs/start.html#edition">Select version</a></li>
      <li><a href="/docs/start.html#grunt">Compile and customize</a></li>
      <li><a href="/docs/start.html#browsers">Supported platforms</a></li>
    </ul>
    <ul class="nav navbar-nav collapsed" data-tab="basic">
      <li class="nav-heading">basis</li>
      <li><a href="/docs/basic.html#hello">Hello world</a></li>
      <li><a href="/docs/basic.html#global">Global style sheet</a></li>
      <li><a href="/docs/basic.html#ie">compatibleIEBrowser</a></li>
      <li><a href="/docs/basic.html#responsive">Responsive design</a></li>
      <li><a href="/docs/basic.html#grid">Grid system</a></li>
      <li><a href="/docs/basic.html#typography">Typesetting</a></li>
      <li><a href="/docs/basic.html#utilities">Auxiliary class</a></li>
      <li><a href="/docs/basic.html#scrollbars">scroll bar</a></li>
      <li><a href="/docs/basic.html#colorset">Color matching</a></li>
      <li><a href="/docs/basic.html#themes">theme</a></li>
    </ul>
    <ul class="nav navbar-nav collapsed" data-tab="controls">
      <li class="nav-heading">Control</li>
      <li><a href="/docs/controls.html#icons">icon</a></li>
      <li><a href="/docs/controls.html#button">Button</a></li>
      <li><a href="/docs/controls.html#progressbar">progress bar</a></li>
      <li><a href="/docs/controls.html#labels">label</a></li>
      <li><a href="/docs/controls.html#textbox">Text box</a></li>
      <li><a href="/docs/controls.html#breadcrumb">Bread crumbs</a></li>
      <li><a href="/docs/controls.html#images">image</a></li>
      <li><a href="/docs/controls.html#headers">title</a></li>
      <li><a href="/docs/controls.html#dividers">Separate</a></li>
    </ul>
    <ul class="nav navbar-nav collapsed" data-tab="components">
      <li class="nav-heading">Component</li>
      <li><a href="/docs/components.html#alerts">Message Box</a></li>
      <li><a href="/docs/components.html#code">Code</a></li>
      <li><a href="/docs/components.html#inputgroup">Input group</a></li>
      <li><a href="/docs/components.html#listgroup">List group</a></li>
      <li><a href="/docs/components.html#navs">navigation</a></li>
      <li><a href="/docs/components.html#navbars">Navigation bar</a></li>
      <li><a href="/docs/components.html#menu">Vertical menu</a></li>
      <li><a href="/docs/components.html#pagers">Pager</a></li>
      <li><a href="/docs/components.html#panels">panel</a></li>
      <li><a href="/docs/components.html#tables">form</a></li>
      <li><a href="/docs/components.html#buttongroup">Button group</a></li>
    </ul>
    <ul class="nav navbar-nav collapsed" data-tab="javascript">
      <li class="nav-heading">JSPlugin</li>
      <li><a href="/docs/javascript.html#store">Local storage</a></li>
      <li><a href="/docs/javascript.html#modals">Modal box</a></li>
      <li><a href="/docs/javascript.html#modaltrigger">Modal box trigger</a></li>
      <li><a href="/docs/javascript.html#dropdowns">Drop-down menu</a></li>
      <li><a href="/docs/javascript.html#tabs">Bookmark page</a></li>
      <li><a href="/docs/javascript.html#messager">Floating message</a></li>
      <li><a href="/docs/javascript.html#tooltips">Prompt message</a></li>
      <li><a href="/docs/javascript.html#popovers">Pop-up box</a></li>
      <li><a href="/docs/javascript.html#collapse">fold</a></li>
      <li><a href="/docs/javascript.html#carousel">Carousel</a></li>
      <li><a href="/docs/javascript.html#datetimepicker">Date selection</a></li>
      <li><a href="/docs/javascript.html#chosen">Chosen</a></li>
      <li><a href="/docs/javascript.html#kindeditor">Rich text editor</a></li>
      <li><a href="/docs/javascript.html#droppable">Drag and drop</a></li>
      <li><a href="/docs/javascript.html#autotrigger">Automatic trigger</a></li>
    </ul>
    <ul class="nav navbar-nav collapsed" data-tab="views">
      <li class="nav-heading">view</li>
      <li><a href="/docs/views.html#datatable">Data table</a></li>
      <li><a href="/docs/views.html#calendar">calendar</a></li>
      <li><a href="/docs/views.html#forms">Form</a></li>
      <li><a href="/docs/views.html#article">article</a></li>
      <li><a href="/docs/views.html#card">card</a></li>
      <li><a href="/docs/views.html#list">List</a></li>
      <li><a href="/docs/views.html#comment">comment</a></li>
      <li><a href="/docs/views.html#board">Kanban</a></li>
      <li><a href="/docs/views.html#dashboard">dash board</a></li>
    </ul>
    <ul class="nav navbar-nav collapsed" data-tab="explore">
      <li class="nav-heading">explore</li>
      <li><a href="/docs/explore.html#sourcecode">Download source</a></li>
      <li><a href="/docs/explore.html#cases">These sites are in use</a></li>
    </ul>
  </div>
</nav>
